<template>
	<view class="new-mark">
		<view class="notice" @click="tab_notice">
			<view class="notice-icon">
				<!-- <image class="news-icon" src="../../static/tixing_laba.png" mode="aspectFit"></image> -->
				<u-icon name="volume-up-fill" color="#f0510f" size="43" style="margin-bottom: 2upx"></u-icon>
				<text class="tixing_box">提醒</text>
			</view>
			<swiper class="notice-c" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000"
				:vertical="true" :circular="true" @change="threeChange">
				<swiper-item v-for="(item,index) in infoList" :key="index" @click="toJump(item)">
					<view class="swiper-item">{{item.informationContent}}</view>
					<!-- <text class="swiper-item head-content1">{{item.informationContent}}</text>
					<text class="swiper-item head-content2">{{item.informationContent}}</text> -->
				</swiper-item>

			</swiper>
			<view class="notice-icon1" v-if="isDataSta" @click="click_tubiao">
				<image class="news-icon1" src="../../static/my/right_shixin.png" mode="aspectFit"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		APP_APPID
	} from "../../utils/constant.js"
	export default {
		name: 'ThreeTips',
		props: {},
		data() {
			return {
				currentNum: -1,
				appid: APP_APPID,
				infoList: [{
						informationContent: '0元下单，先享后付！'
					},
					{
						informationContent: '时尚好物，此刻即得！'
					}
				],
				isDataSta: false, //走接口是否有数据
				
				
				
				
				//下面是没用的垃圾混淆代码
				renzhengTimeSta1111111: true, //初次请求认证时间默认是带有的，
				zhuceTimeSta11111: false, //初次请求注册时间默认是没有的
				renzhengTimeList11111: [],
				zhuceTimeStaList1111: null,
				detailOrderIdStr11111: '',
				threeTabCurrent1111: 0,
				applyGOodsList11111: [], //供货商列表
				allCardEnterSta1111: false, //默认是false，点击批量卡券入库的时候变为true
				codeAddNumsList11111: [],
				numsList11111: [],
				dataSourceBqcp1111: [],
				selectedRowKeys1111: [],
				selectedRowKeysB11111: [],
				rkVisible11111: false,
				rkjlVisible1111: false,
				lhjlVisible1111: false,
				currentStyleData22222: {},
				dataSourceStyle2222: [],
				showStyleData2222: false,
				indexTemplate2222: [],
				SVGCircleElement3ee: '',
				vshoweqwsc1111: false,
				showStyleDataInfo2222: false,
				opeCategoryList2222: [],
				leimuVisible2222: false,
				selectedRowKeys02222: [],
				selectionRows02222: [],
				selectedRowKeys133333: [],
				selectionRows13333: [],
				selectedRowKeys2333: [],
				selectionRows23333: [],
				selectedRowKeys33333: [],
				selectionRows33333: [],
				selectedRowKeys4333: [],
				selectionRows43333: [],
				curwfqwrentStyleDaterwaInfo444: {},
				currwerentStywerleDatweraInfo1444: {},
				currewerntStyleDataInfo24444: {},
				currentweStyleDytuataIwenfo34444: {},
				currenwetStdfgyleDataInfo44444: {},
				checkZfbPhone_h5444: '',
				plNafgdvfdtjyme4444: '', //四大品类的名字
				uniPdfgrtylatform444: '', //运行环境mp-alipay mp-weixin
				refgjtytrsemark555: '', //备注
				timefgjSelStr5555: '', //选择的上门时间（2023-08-31 00:00:00）
				amOdcuiofasrpm5555: '', //选择的上门时间是上午还是下午
				pageShnjlkgohowTime5555: '', //页面上用户看到的显示的时间
				paraghsdfmsw454: {},
				valhgujtueNum56756: 0,
				addrdraess56756: {}, //上门收货地址
				adawerterydressId575: 0,
				sceoyuitne57567: '',
				tntuiopId56757: '',
				weictyuratCustomer5756: '',
				yuidurtyuoy567567: false,
			};
		},
		components: {},

		onLoad() {},
		mounted() {
			console.log('首页轮播公示的appid', this.appid);
			this.getLunboData()
		},

		onUnload() {},

		methods: {
			tab_notice() {
				  // #ifndef H5 || APP-PLUS
				  let proObj = this.infoList[this.currentNum]
				  this.toJump(proObj)
				  // #endif
			},
			threeChange(e) {
				// console.log('---e-e-e-e----',e.detail.current);
				this.currentNum = e.detail.current

			},
			getLunboData() {
				let lunboObj = {
					appletAppId: this.appid
				}
				this.$request("product/mall/carouselInformation/selectCarouselInformation", lunboObj, "POST", false).then((
					res) => {
					if (res.data.length > 0) {
						this.infoList = res.data
						this.isDataSta = true
					} else {
						this.infoList = [{
								informationContent: '0元下单，先享后付！'
							},
							{
								informationContent: '时尚好物，此刻即得！'
							},
						]
						this.isDataSta = false
					}
				})
			},
			//轮播消息点击跳转页面或者商品详情页或者产品类目
			toJump(item) {
				console.log('首页页面公告', item);
				if (item.informationType == '页面公告' && item.url) {
					this.$onTo(`/pagesInfo/gonggaoimg-rich/gonggaoimg-rich?imgs=${item.url}`);
				} else if (item.informationType == '产品公告') {
					console.log('产品公告跳转产品详情页');
					this.$onTo(`/pagesClass-rich/product/product?productId=${item.parameter}`)
				} else if (item.informationType == '类目公告') {
					console.log('类目公告跳转类目页');
					this.$onTo(`/pagesClass-rich/classified1-rich/classified1-rich?id=${item.parameter}`)
				}
			},
			click_tubiao() {
				if(this.infoList && this.infoList.length>0){
					if(this.infoList.length==1){
						this.currentNum=0
					}
					let proObj = this.infoList[this.currentNum]
					this.toJump(proObj)
				}
			},

		}
	};
</script>

<style lang="scss" scoped>
	.new-mark {
		color: gray;
		font-size: 24rpx;
		margin: 5rpx auto;
		padding: 0 20rpx;
	}

	.notice {
		padding: 20rpx;
		// position: relative;
		overflow: hidden;
		background-color: #fff;
		color: #333;
		border-radius: 5px;


		display: flex;
	}

	.notice-icon {
		// height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.tixing_box {
			display: inline-block;
			border-right: 3rpx solid #e1e1e1;
			padding-right: 10px;
			margin-left: 8rpx;
		}

		.news-icon {
			width: 46rpx;
			height: 32rpx;
			// float: left;
		}

		// position: absolute;
		// top: 60%;
		// left: 26rpx;
		// transform: translateY(-50%);
		// overflow: hidden;
		// width: 30%;
	}

	.notice-icon1 {
		// display: flex;
		// justify-content: center;
		// align-items: center;
		height: 50rpx;
		margin-left: auto;
		position: absolute;
		top: 60%;
		right: 26rpx;
		transform: translateY(-50%);
		overflow: hidden;

		.news-icon1 {
			width: 40rpx;
			height: 40rpx;
		}
	}



	.notice-c {
		margin-left: 30rpx;
		height: 50rpx;
		line-height: 50rpx;
		width: 66%;
		// display: inline-block;
		font-size: 28rpx;
		float: left;
		font-size: 22rpx;

		.swiper-item {
			white-space: nowrap; //不换行
			overflow: hidden; //超出部分隐藏
			text-overflow: ellipsis; //文本溢出显示省略号
			// animation-iteration-count: infinite !important;
		}
		.head-content1{
			animation: scroll1 6s linear;
		}
		
		.head-content2 {
			animation: scroll2 6s linear;
		}
		@keyframes scroll1 {
			0% {
				margin-left: 0;
			}
		
			100% {
				margin-left: -30em;
			}
		}
		@keyframes scroll2 {
			0% {
				margin-left: 30em;
			}
		
			100% {
				margin-left: 0;
			}
		}
	}
</style>